<template>
  <h2>Provide与inject</h2>
  <h1>{{ msg }}</h1>
  <button @click="change1">红色</button>
  <button @click="change2">黄色</button>
  <button @click="change3">绿色</button>
  <Son />
</template>

<script lang="ts">
import { defineComponent, provide, inject, ref } from 'vue'
import Son from './components/Son.vue'

export default defineComponent({
  components: { Son },
  name: 'App',
  setup() {
    const msg = ref('你好啊')
    const change1 = () => {
      msg.value = '红色'
    }
    const change2 = () => {
      msg.value = '绿色'
    }
    const change3 = () => {
      msg.value = '黄色'
    }
    provide('msg', msg)
    return { msg, change1, change2, change3 }
  }
})
</script>

<style scoped>
</style>